<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="layout" content="main" />
    <title>Lin = CASH MONEY!</title>
    <script type="text/javascript" src="https://api.stripe.com/js/v1/"></script>
    <r:require modules="mamba" />
  </head>
  <body>
    <g:if test="${flash.invalidToken}">Don't click the button twice!</g:if>
    <div class="payment-errors" />
    <g:form action="order" name="payment-form" useToken="true">
      <div class="form-row">
        <label>Card Number</label>
        <input type="text" size="20" autocomplete="off" class="card-number"/>
      </div>
      <div class="form-row">
        <label>CVC</label>
        <input type="text" size="4" autocomplete="off" class="card-cvc"/>
      </div>
      <div class="form-row">
        <label>Expiration (MM/YYYY)</label>
        <input type="text" size="2" class="card-expiry-month"/>
        <span> / </span>
        <input type="text" size="4" class="card-expiry-year"/>
      </div>
      <button type="submit" class="submit-button">Submit Payment</button>
      <r:script>
        Stripe.setPublishableKey('pk_MIgDz5v2il53sqOiHQBgGdOnHWaPp');
        
        function stripeResponseHandler(status, response){
          if(response.error){
            jQuery('.payment-errors').html(response.error.message);
          }
          else{
            var form$ = jQuery('#payment-form');
            var token = response.id;
            form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
            form$.get(0).submit();
          }
        }
        
        jQuery(document).ready(function(){
          jQuery('.submit-button').attr("disabled", "disabled");
          
          Stripe.createToken({
            number: jQuery('.card-number').val(),
            cvc: jQuery('.card-cvc').val(),
            exp_month: jQuery('.card-expiry-month').val(),
            exp_year: jQuery('.card-expiry-year').val(),
          }, stripeResponseHandler);
          return false;
        });
      </r:script>
    </g:form>
  </body>
</html>
